<template>
	<view>
		<view style="border: 0px solid red; backgroundColor:#B8D4FD; padding:10px 10px;  width:100%; display: flex;justify-content: center;align-items: center; ">
	    <b style="color:blue"> {{ username }} </b>  &nbsp; <b>测试结果公布</b>
		</view>

		<view class="gradient-background"  style="border: 0px solid red;  width:100%; display: flex; justify-content: center;align-items: center; ">
			<image :src="imageData"  style="width:200px; height:250px; border-radius: 10rpx"    mode="scaleToFill"    />
		</view>

		<view style="border: 0px solid red;  line-height: 20px; width:100%;  padding: 10px 25px; display: flex; justify-content: center;align-items: center; ">
			<view style="width:100%; border: 0px solid red;" >
				<rich-text :nodes="content"></rich-text>
			</view>
		</view>
		
	</view>
	
	<view v-show="ctnShow" style="width:100%;" >
	<view style="width:100%; border: 0px solid red; display: flex;justify-content: center; align-items: center;" >
	<TnLoading show animation  color="#01beff" type="success" mode="flower"
	duration="1" time-function="ease-in-out" size="50px" />
	</view>
	</view>
	
	<view v-show="buttonShow" style="width:100%;" >
	<view style="margin-top: 80px; width:100%; display: flex;justify-content: center;align-items: center; ">
	<TnButton  size="xl" width="80%" text-color="tn-white" 
		bg-color="#5A4EFF"   @click="testAgain()" > 再测一次 </TnButton>
	</view>
	</view>
	<view style="  width:100%; height:100px; ">
 
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import TnButton from '@/uni_modules/tuniaoui-vue3/components/button/src/button.vue'
	import TnLoading from '@/uni_modules/tuniaoui-vue3/components/loading/src/loading.vue'
	import { uploadHeaderImage } from '@/api/upImageFile'
 
 
 const content   = ref("")
 const username  = ref("")
 const imageData = ref("")
 const ctnShow   = ref(true)
 const buttonShow   = ref(false)
 onLoad((options) => {
 	console.log('接收传值：',options)
	console.log('接收传值：',options.file)
	console.log("================onLoad=======================");
	imageData.value = options.file
	if(options.file==undefined){
		uni.redirectTo({
		  url:'/pages/upload/upload'
		});
		return
	}
	console.log( imageData )
	let data = { name: 'file', filePath: imageData.value }

	uploadHeaderImage(data).then( response => {
		uni.showToast({ title: "评测成功", icon: 'success', duration: 2000  })
		console.log("---------------------------------")
		console.log(response.data)
		content.value  = response.data.content
		username.value = response.data.username
		ctnShow.value  = false

		// 设置一个1000毫秒后执行的定时器
		setTimeout(function(){
			buttonShow.value = true
		}, 10000);
	}).catch(error => {
		console.log(JSON.stringify(error))
		uni.showToast({ title: "文件上传异常" + JSON.stringify(error), 
			icon: 'none', duration: 3000  })
		ctnShow.value  = false
	})
 });

const testAgain = () => {
	uni.redirectTo({
	//uni.navigateTo({
		url:'/pages/upload/upload'
	});
}
	   
</script>

<style>
	page {
	  background-color: #EAEEF5;
	}


	/* 设置一个从上到下的蓝色到红色的线性渐变 */
	.gradient-background {
	  background-image: linear-gradient(to bottom, #B8D4FD, #EAEEF5);
	}
</style>
